<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__CDN__/assets/vvptd/member/css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="__CDN__/assets/vvptd/member/css/home.css"/>
		<style type="text/css">
			#allmap1 {
				width: 100%;
				height: 300px;
			}
			.mui-content {
				padding-top: 44px;
			}
			.order-page {
				padding: 0 3%;
			}
			.order-current {
				background-color: #fff;
			}
			.order-current:after {
				height: 1px;
			}
			.pingjia {
				margin-bottom: 10px;
			}
			.pingjia span {
				font-size: 12px;
				color: #333333;
				margin-right: 10px;
			}
			.pingjia img {
				width: 13px;
			}
			.mui-table-view-cell .pingjia-msg {
				font-size: 12px;
				color: #333333;
				margin-bottom: 10px;
			}
			.reply input {
				width: 70%;
				border: none;
				outline: none;
				padding: 6px 20px;
				background-color: #EEEEEE;
				border-radius: 20px;
				height: 25px;
				font-size: 12px;
				margin-top: 2.5px;
			}
			.reply button {
				float: right;
				width: 20%;
				height: 30px;
				font-size: 12px;
				background-color: #10B6FF;
				color: #fff;
				border-radius: 30px;
				border: 0;
			}
			.anchorBL{display:none;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #858585;"></a>
			<h1 class="mui-title">订单详情</h1>
		</header>
		
		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="mui-content">
				<div id="allmap1" class="map2"></div>
				<div class="order-page">
					<div class="mui-table-view">
						<div class="mui-table-view-cell order-current">
							<span></span>
							<span>{$order['type_info']['service_name']}</span>
                            {if condition=" $order['status'] eq 2 or  $order['status'] eq 5 or $order['status'] eq 6"}
                            <span class="mui-pull-right">已完成</span>
                            {else/}
                            <span class="mui-pull-right">进行中</span>
                            {/if}
						</div>
						<div class="mui-table-view-cell order-number">
							<p><span>订单号码：{$order['order_num']}</span><span class="mui-pull-right">{$order['create_time']}</span></p>
							<div class="order-number-msg">
								<div class="mui-pull-left">
									<img src="{$order['runmen']['avatar']}" alt="">
								</div>
								<div class="mui-pull-left">
									<p class="order-number-name">{$order['runmen']['nickname']}</p>
									<p id="phoneNumber">{$order['runmen']['mobile']}</p>
								</div>
								<div class="mui-pull-right" id="telephone">
									<span class="mui-icon iconfont icon-dianhua"></span>
								</div>
							</div>
						</div>
						<div class="mui-table-view-cell product-type">
							<p>产品类型：<span> {$order['type_info']['service_name']}</span></p>
							<div class="customer-request mui-row">
								<p class="mui-col-xs-4 mui-col-sm-4">客户要求：</p>
								<p class="mui-col-xs-8 mui-col-sm-8">{$order['content']['details']}</p>
							</div>
						</div>
						<div class="mui-table-view-cell buy-address">
							<p> <span class="order-type buy">买</span> 购买地址：</p>
							<p>{$order['start_address']}</p>
						</div>
						<div class="mui-table-view-cell buy-address">
							<p> <span class="order-type receive">收</span> 收获地址：</p>
							<p>{$order['end_address']}</p>
						</div>
						<div class="mui-table-view-cell buy-msg">
                            {if condition=" $order['content']['service_time'] eq '' or $order['content']['service_time'] eq undefined "}
							<p>购买时间：<span> 立即购买</span></p>
                            {else/}
                            <p>购买时间：<span> {$order['content']['service_time']}</span></p>
                            {/if}
						</div>
						<div class="mui-table-view-cell buy-msg">
							<p>商品预付：<span>
                                {if condition=" $order['content']['prepayment'] =='' or $order['content']['prepayment']==undefined " }
                                    0
                                {else/}
                                    {$order['content']['prepayment']}
                                {/if}
                                元</span></p>
						</div>
						<div class="mui-table-view-cell buy-msg">
							<p>距离：<span> {if condition=" $order['start_end_distance'] eq '' "}0{else/}{$order['start_end_distance']}{/if}（公里）</span></p>
						</div>
                        <input type="hidden" id="start_lon" value="{$order['start_lon']}">
                        <input type="hidden" id="start_lat" value="{$order['start_lat']}">
                        <input type="hidden" id="end_lon" value="{$order['end_lon']}">
                        <input type="hidden" id="end_lat" value="{$order['end_lat']}">
						<div class="mui-table-view-cell order-cost" style="padding-bottom: 11px;margin-top: 0;">
							<p>订单金额：<span>{$order['money']}元</span></p>
							<p>(含商品预付费用)</p>
						</div>
						<!--<div class="mui-table-view-cell">-->
							<!--<div class="pingjia">-->
								<!--<span>综合评价</span>-->
								<!--<img src="../../img/xing.png" alt="">-->
								<!--<img src="../../img/xing.png" alt="">-->
								<!--<img src="../../img/xing.png" alt="">-->
								<!--<img src="../../img/xing.png" alt="">-->
								<!--<img src="../../img/huixing.png" alt="">-->
							<!--</div>-->
							<!--<p class="pingjia-msg">-->
								<!--<span>态度好</span>-->
								<!--<span>速度快</span>-->
								<!--<span>着装整洁</span>-->
							<!--</p>-->
							<!--<div class="reply">-->
								<!--<input type="text" placeholder="回复">-->
								<!--<button type="button" class="mui-btn">发送</button>-->
							<!--</div>-->
						<!--</div>-->
					</div>
					
				</div>
			</div>
		</div>
		</div>
		<script src="__CDN__/assets/vvptd/member/js/mui.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rD7bB2RmUfsanAFyKvdybpBRY9BkDuol"></script>
		<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
		<script type="text/javascript">
			mui.init();
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
			mui.plusReady(function() {
                plus.geolocation.getCurrentPosition(translatePoint, function(e) {
                    mui.toast("异常:" + e.message);
                });
			});
            function translatePoint(position) {
            	var currentLon = position.coords.longitude;
            	var currentLat = position.coords.latitude;
            	var gpsPoint = new BMap.Point(currentLon, currentLat);
            	BMap.Convertor.translate(gpsPoint, 0, initMap2); //坐标转换
            }
			function initMap2(point) {
				mp = new BMap.Map("allmap1"); //创建地图

                var start_lng = "{$order['start_lon']}";
                var start_lat = "{$order['start_lat']}"
                var end_lng = "{$order['end_lon']}";
                var end_lat = "{$order['end_lat']}"
                var start = new BMap.Point(start_lng,start_lat);
				mp.centerAndZoom(start, 16);
				var myP1 = new BMap.Point(start_lng,start_lat); //起点
				var myP2 = new BMap.Point(end_lng,end_lat); //终点
				var driving2 = new BMap.DrivingRoute(mp, {
					renderOptions: {
						map: mp,
						autoViewport: true
					}
				}); //驾车实例
				driving2.search(myP1, myP2); //显示一条公交线路
			
				window.run = function() {
					var driving = new BMap.DrivingRoute(mp); //驾车实例
					driving.search(myP1, myP2);
					driving.setSearchCompleteCallback(function() {
						var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组
						var paths = pts.length; //获得有几个点			
			
					});
				}
			
				setTimeout(function() {
					run();
				}, 1500);
			
			
			}
		</script>
	</body>
</html>
